<template>
  <div class="app-container">
    <el-form :inline="true" :model="listQuery" @submit.native.prevent>
      <el-form-item label="文章标题">
        <el-input v-model="listQuery.q_title" size="small" class="filter-item" maxlength="20" />
      </el-form-item>
      <el-form-item label="文章分类">
        <el-select v-model="listQuery.q_typeId" size="small" placeholder="请选择">
          <el-option v-for="item in floor" :label="item.name" :key="item.id" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否推荐">
        <el-select v-model="listQuery.q_isRecommend" size="small" placeholder="请选择">
          <el-option v-for="item in floorClassStatus" :label="item.name" :key="item.value" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="small" type="primary" @click="check">查询</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="button-table-margin">
      <el-button size="small" type="primary" @click='addFloorClass' v-permission="['admin/system/news/create']">添加
      </el-button>
      <el-button size="small" type="primary" @click='editFloorClass' v-permission="['admin/system/news/update']">修改
      </el-button>
      <el-button size="small" type="primary" @click='del' v-permission="['admin/system/news/del']">删除</el-button>
    </div>
    <el-table ref="singleTable" :data="dataList" v-loading="listLoading" border fit highlight-current-row
      style="width: 100%" @current-change="handleCurrentChange">
      <el-table-column type="index" align="center" width="50">
      </el-table-column>
      <el-table-column property="typePath" label="所属分类">
      </el-table-column>
      <el-table-column label="新闻标题" width="200" property="title" show-overflow-tooltip>
      </el-table-column>
      <el-table-column property="sort" label="排序">
      </el-table-column>
      <el-table-column label="是否显示">
        <template slot-scope="scope">
          {{ codeBox.YES_NO[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column label="是否推荐">
        <template slot-scope="scope">
          {{ codeBox.YES_NO[scope.row.isRecommend] }}
        </template>
      </el-table-column>
      <el-table-column property="updateTime" width="200" label="修改时间">
      </el-table-column>
      <el-table-column property="updateTime" width="200" label="创建时间">
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      @pagination="getList" />
  </div>
</template>
<script>
  import {
    tofetchNewsList,
    fetchNewsList,
    delNews
  } from '@/api/news'
  import {
    getCodeManager,
    codeToArray
  } from '@/api/all'
  import Pagination from '@/components/Pagination'
  import {
    Message
  } from 'element-ui'
  export default {
    name: 'newslist',
    components: {
      Pagination
    },
    data() {
      return {
        dataList: [],
        floor: [],
        floorClassStatus: [],
        total: 0,
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 20,
          q_title: '',
          q_typeId: '',
          q_isRecommend: ''
        },
        currentRow: null
      }
    },
    created() {
      getCodeManager('YES_NO', () => {
        this.floorClassStatus = codeToArray('YES_NO');
      })
      tofetchNewsList().then(res => {
        this.floor = res.data.data.newsTypes
      })
      this.getList()
    },
    methods: {
      handleCurrentChange(val) {
        // 选中当前行数据
        this.currentRow = val
      },
      // 获取列表数据
      getList() {
        this.listLoading = true
        fetchNewsList(this.listQuery).then(response => {
          this.dataList = response.data.rows
          this.total = response.data.total
          this.listLoading = false
          console.log(this.dataList)
        })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      check() {
        this.getList()
      },
      reset() {
        this.listQuery = {
          page: 1,
          limit: 20,
          q_title: '',
          q_typeId: '',
          q_isRecommend: ''
        }
        this.getList()
      },
      addFloorClass() {
        this.$router.push({
          path: '/news/newsadd'
        });
      },
      editFloorClass() {
        if (!this.currentRow) {
          Message.error('请选择操作行。')
          return;
        };
        this.$router.push({
          path: '/news/newsedit',
          query: {
            id: this.currentRow.id
          }
        });
      },
      del() {
        if (!this.currentRow) {
          Message.error('请选择操作行。')
          return;
        };
        this.$confirm('确定删除吗？', '提示', {
          onfirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delNews({
            id: this.currentRow.id
          }).then(res => {
            if (res.data.success) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getList()
            } else {
              this.$message({
                type: 'error',
                message: res.data.message
              });
            }
          })
        })
      }
    }
  }
</script>
<style scoped>
  .filter-container .el-col-6 {
    margin-bottom: 15px;
  }

  .filter-item {
    margin-bottom: 0
  }

  /deep/ .filter-container label {
    font-size: 14px;
    font-weight: 500;
    margin-right: 10px;
  }
</style>
